<template>
  <div class="modj">
    <router-link to="/home"><i class="iconfont icon-shouye-shouye"></i></router-link>
    <ul>
     <div class="t"><h1>优质电台</h1> </div>
      <li v-for="(itm,index) in list" :key="index">
                  <div class="tit">{{itm.category}}</div>
              <div class="img">
                  <img v-lazy="itm.picUrl" alt="">
                </div>
                <div class="foot">
                  <div class="text">{{itm.lastProgramName}}</div>
                
                </div>
      </li>
    </ul>
    <div ref="more" class="te">{{te}}</div>
  </div>
</template>
<script>


export default {
   name:'Modj',
  data() {
    return{
      list:[],te:'加载更多......'
    } 
  },
  created(){
  this.getlist()
  },
  mounted(){
 

  },
  methods:{
      getlist(){
      this.$http.get('/api/dj/recommend/type',{params:{type:this.$route.params.id}}).then(res=>{
        // console.log(res.data.djRadios,'1////');
        this.list=res.data.djRadios
      
      })
    },
  }
}
</script>


<style lang="less" scoped>
.modj{
 background:-webkit-linear-gradient(132deg,#351172 5%, #5f4385 10%, #07030c 15%, #3e108d 20%, #130729 25%,#420aa1 30%, #5F5370 35%, #6b19dd 40%, #231142 45%, #B2A2CD 50%, #4c2491 55%, #5F5370 60%, #16052e 65%, #B2A2CD 70%, #6628d1 75%, #5F5370 80%,#B2A2CD 85%, #5F5370 90%,#4b1ba0 95%, #5F5370 98%, #5F5370 100%);;
  ul li{
      width: 100%;
      height: 260px;
     
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  i{color: white;}
   .img{
   width: 200px;
   height: 200px;
  }
  .te{
    color: white;
  }
  .text{
     color: white;
  }
  .img img{
    width: 200px;
   height: 200px;
  }
  .t{
   
    width: 100%;
    height: 33px;
    font-weight: 900;
    font-size: 22px;
    margin-bottom: 20px;

  }
  .tit{
    width: 100px;
    margin-bottom: 3px;
    height: 30px;
    background:-webkit-linear-gradient(left,red,blue);
    border-radius: 20px;
    line-height: 30px;
    color: white;
    text-align: center;
    border: 1px solid;
  }
}


</style>
